<template>
    <form @submit.prevent="()=>{return false}" class="work-info">
        <div class="game-con-info">
          <div class="info-detail-mask" @click="handleClose"  @mouseover="onMaskOver" @mouseleave="onMaskLeave"></div>
          <div class="game-info">
              <!-- <a class="close-modal-page"  @click="handleClose"></a> -->
              <el-popover popper-class="gm-info-pop" placement="bottom" trigger="hover">
                <i class="sm-tip" slot-content>关闭</i>
                <a slot="reference" class="close-modal-page" @click="handleClose"></a>
            </el-popover>
              <!-- <a class="top-back"  @click="handleClose"></a> -->
              <work :id="id" @prev="onPrev" @next="onNext"/>
          </div>
        </div>
    </form>
</template>

<script>
import work from '@/components/info/work'
export default {
    components:{work},
    data(){
        return {
            
        }
    },
    props:['id'],
    methods:{
        onMaskOver(e){
            $(e.target).parents('.el-drawer__container').css({'background':'rgba(0, 0, 0, 0.25)','backdrop-filter':'saturate(180%) blur(10px)'})
        },
        onMaskLeave(e){
            $(e.target).parents('.el-drawer__container').css({'background':'rgba(0, 0, 0, 0.6)','backdrop-filter':'saturate(180%) blur(16px)'})
        },
        onPrev(){
            this.$emit('prev')
        },
        onNext(){
            this.$emit('next')
        },
        handleClose(){
            this.$emit('close')
        },
        handleTagPrev(){
            this.gmTagSwiper.slidePrev()
        },
        handleTagNext(){
            this.gmTagSwiper.slideNext()
        },
        handledxVdSwiperPrev() {
            this.gmVideoSwiper.slidePrev();
        },
        handledxVdSwiperNext() {
            this.gmVideoSwiper.slideNext();
        }
    },
    mounted(){
        document.body.style.overflow='hidden'
        // let that=this;
        // that.$nextTick(() => {
        //     new Swiper('.yx-cates', {
        //         direction: 'horizontal', // 垂直切换选项
        //         //mousewheel: true, //滚轮
        //         autoplay: false,
        //         slidesPerView: 6.5,
        //         loop: false,
        //     })

        //     new Swiper('.game-tags', {
        //         direction: 'horizontal', // 垂直切换选项
        //         //mousewheel: true, //滚轮
        //         autoplay: false,
        //         slidesPerView: 6.5,
        //         loop: false,
        //     })
            
        //     new Swiper('.dx-video-datas', {
        //         direction: 'horizontal', // 垂直切换选项
        //         //mousewheel: true, //滚轮
        //         autoplay: false,
        //         slidesPerView:3,
        //         loop: false,
        //     })
        // })
    }
}
</script>

<style scoped lang="less">
/* 定义淡出动画 */
@keyframes fadeIn {
  from { /* 动画开始时 */
    opacity:0;
  }
  to { /* 动画结束时 */
    opacity:1;
  }
}
.work-info{
    .info-detail-mask {
    // position: fixed;
    // left: 0px;
    // right: 0px;
    // top: 0px;
    // background: rgba(0, 0, 0, 0.7);
    // z-index: 101;
    // width: 100%;
    // height: 100%;
    }
    .game-con-info {
        position: fixed;
        animation: fadeIn .3s ease-in-out forwards;
        left: 0px;
        right: 0px;
        top: 0px;
        z-index: 115;
        width: 100%;
        // overflow-y:auto;
        height: 100%;
        &::-webkit-scrollbar{
        width: 3px;
        height: 8px;
        background-color: transparent;
        }
        /*滚动条的轨道*/
        &::-webkit-scrollbar-track{
        background-color: transparent;
        }
        /*滚动条的滑块按钮*/
        &::-webkit-scrollbar-thumb{
        border-radius: 3px;
        background-color: #626262;
        }
        /*滚动条的上下两端的按钮*/
        &::-webkit-scrollbar-button{
        height: 0;
        }
        
        /* 两个滚动条的交汇处 */
        &::-webkit-scrollbar-corner{
        background-color: transparent;
        }
        .game-info {
            // max-width: 1920px;
            margin: 0 auto;
            margin-top:45px;
            background: #000;
            position: relative;
            display: flex;
            z-index:102;
            height: calc(100% - 45px);
            
            transition:margin 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
            .close-modal-page{
                width:19px;
                height:19px;
                background:url('../assets/pro/close_modal_page.svg') no-repeat;
                background-size:19px 19px;
                position: fixed;
                top:12px;
                z-index:102;
                right:19px;
                transition:.1s all linear;
                &:hover{
                    transform: rotate(180deg);
                }
            }
            .top-back{
                width:44px;height:44px;
                background:url('../assets/pro/gminfo_topback.svg') no-repeat;
                background-size:cover;
                position: absolute;
                top:30px;
                z-index:102;
                transition:.2s all linear;
                left:30px;
                &:hover{
                    background:url('../assets/pro/gminfo_topback_hover.svg') no-repeat;
                    background-size:cover;
                }
            }

            .left-con{
                max-width:calc(100% - 366px);
                position: relative;
                img{
                    display: block;
                    width:100%;
                    height:100%;
                    object-fit: cover;
                }
                .top-funs{
                    position: absolute;
                    top:20px;
                    right:20px;
                    z-index:103;
                    display: flex;
                    flex-wrap:wrap;
                    .full-screen{
                        width:40px;height:40px;
                        background:url('../assets/pro/workinfo/scale.svg') no-repeat;
                        background-size:cover;
                        &:hover{
                            background:url('../assets/pro/workinfo/scale_press.svg') no-repeat;
                            background-size:cover;
                        }
                    }
                    .refresh{
                        width:40px;height:40px;
                        background:url('../assets/pro/workinfo/refresh.svg') no-repeat;
                        background-size:cover;
                        margin:0px 30px;
                        &:hover{
                            background:url('../assets/pro/workinfo/refresh_press.svg') no-repeat;
                            background-size:cover;
                        }
                    }
                    .download{
                        width:40px;height:40px;
                        background:url('../assets/pro/workinfo/download.svg') no-repeat;
                        background-size:cover;
                        &:hover{
                            background:url('../assets/pro/workinfo/download_press.svg') no-repeat;
                            background-size:cover;
                        }
                    }
                }
            }
            .right-con-box{
                min-width:366px;
                width:366px;
                position:sticky;
                right:0px;
                top:39px;
                height:calc(100vh - 39px);
                background:#171717;
                padding:30px 17px;
                .user{
                    display: flex;
                    align-items:center;
                    justify-content:space-between;
                    .left{
                        display: flex;
                        align-items: center;
                        .img-box{
                            width:50px;height:50px;
                            overflow: hidden;
                            border-radius:50px;
                            margin-right:11px;
                            img{
                                width:100%;height:100%;
                                object-fit: cover;
                            }
                        }
                        .basic{
                            .name{
                                font-size:16px;
                                line-height:22px;
                            }
                            .desc{
                                margin-top:6px;
                                font-size:12px;
                                color:#BBBBBB;
                            }
                        }
                    }
                    .follow{
                        border:1px solid #fff;
                        border-radius:4px;
                        line-height:22px;
                        padding:0px 7px;
                        min-width:54px;
                        text-align: center;
                        padding-left:20px;
                        user-select: none;
                        background:url('../assets/pro/workinfo/work_follow.svg') no-repeat;
                        background-position:8% center;
                        &.active{
                            background:url('../assets/pro/workinfo/work_follow_active.svg') no-repeat;
                            background-position:8% center;
                        }
                    }
                }
                .btn-row{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size:14px;
                    line-height: 32px;
                    margin-top:24px;
                    user-select: none;
                    .zan-btn{
                        background:#3D3D3D;
                        color:#fff;
                        border-radius:6px;
                        width:150px;
                        text-align: center;
                        background-image: url('../assets/pro/workinfo/work_info_zan.svg');
                        background-repeat: no-repeat;
                        background-position:48px center;
                        padding-left:10px;
                    }
                    .add-to-collect{
                        background:#11CCB1;
                        color:#fff;
                        border-radius:6px;
                        width:150px;
                        text-align: center;
                    }
                }
                .title{
                    font-size:28px;
                    line-height:40px;
                    margin-top:20px;
                }
                .tags{
                    line-height:26px;
                    display: flex;
                    flex-wrap: wrap;
                    margin-top:17px;
                    .tag{
                        margin-right:10px;
                        border-radius:13px;
                        background: #242327;
                        font-size:14px;
                        padding:0px 11px;
                        color:#BBBBBB;
                    }
                }
                .sub-desc{
                    font-size:14px;
                    color:#BBBBBB;
                    line-height:26px;
                    margin-top:20px;
                }
                .publish-time{
                    color:#BBBBBB;
                    font-size:12px;
                    margin-top:14px;
                }
                .ico-btns{
                    border-top:1px solid #323232;
                    border-bottom:1px solid #323232;
                    padding:15px 0px;
                    display: flex;
                    align-items: center;
                    font-size:14px;
                    margin-top:16px;
                    a{
                        width:100%;
                        padding-left:27px;
                        &.comment{
                            background:url('../assets/pro/workinfo/comment.svg') no-repeat;
                            background-position:0px center;
                            background-size:20px 20px;
                            &.active{
                                background:url('../assets/pro/workinfo/comment_active.svg') no-repeat;
                                background-position:0px center;
                                background-size:20px 20px;
                            }
                        }
                        &.fav{
                            background:url('../assets/pro/workinfo/fav.svg') no-repeat;
                            background-position:0px center;
                            background-size:20px 20px;
                            &.active{
                                background:url('../assets/pro/workinfo/fav_active.svg') no-repeat;
                                background-position:0px center;
                                background-size:20px 20px;
                            }
                        }
                        &.zan{
                            background:url('../assets/pro/workinfo/work_info_zan.svg') no-repeat;
                            background-position:0px center;
                            background-size:20px 20px;
                            &.active{
                                background:url('../assets/pro/workinfo/work_info_zan_active.svg') no-repeat;
                                background-position:0px center;
                                background-size:20px 20px;
                            }
                        }
                    }
                }
                .comment-area{
                    margin-top:32px;
                    .send-mbox{
                        display: flex;
                        align-items: center;
                        margin-top:17px;
                        .u-img{
                            min-width:34px;height:34px;
                            border-radius:34px;
                            overflow: hidden;
                            margin-right:12px;
                            img{
                                width:100%;height:100%;
                                object-fit: cover;
                            }
                        }
                        .right{
                        width:281px;
                        position: relative;
                        display: flex;
                        align-items: center;
                        input{
                            background: #242327;
                            width:100%;
                            border:none;
                            border:none;
                            line-height:44px;
                            padding-left:16px;
                            font-size:14px;
                            color:#fff;
                            border-radius:22px;
                        }
                        .opbtns{
                            position: absolute;
                            right:0px;
                            display: flex;
                            align-items: center;
                            .face-btn{
                            width:20px;height:20px;
                            background:url('../assets/pro/top_cmt_face.svg') no-repeat;
                            background-size:cover;
                            display: flex;
                            align-items: center;
                            margin-right:13px;
                            &:after{
                                content:'';
                                width:1px;
                                background:#484848;
                                height:18px;
                                margin:0px 13px;
                                position: absolute;
                                left:20px;
                            }
                            &:hover{
                                background:url('../assets/pro/top_cmt_face_active.svg') no-repeat;
                                background-size:cover;
                            }
                            }
                            .send-btn{
                            width:24px;height:24px;
                            background:url('../assets/pro/top_cmt_sendbtn.svg') no-repeat;
                            background-size:cover;
                            margin-left:13px;
                            margin-right:15px;
                            }
                        }
                        }
                    }
                }
                .tabs{
                    font-size:18px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top:36px;
                    span{
                        cursor: pointer;
                        transition:.1s all linear;
                        &:first-child{
                            margin-right:129px;
                        }
                        &.active{
                            font-weight:600;
                            color:#fff;
                            border-bottom:1px solid #fff;
                        }
                        &:hover{
                            font-weight:600;
                            color:#fff;
                            border-bottom:1px solid #fff;
                        }
                    }
                }
                .comments{
                    margin-top:28px;
                    .comment-data-item{
                        display: flex;
                        align-items: flex-start;
                        margin-bottom:20px;
                        .uavatar{
                            width:34px;height:34px;
                            min-width:34px;
                            border-radius:34px;
                            overflow: hidden;
                            margin-right:31px;
                            img{
                            width:100%;
                            height:100%;
                            object-fit: cover;
                            }
                        }
                        .r-con{
                            background:#202020;
                            border-radius:8px;
                            padding:12px 16px;
                            width:100%;
                            .name{
                            color:#BBBBBB;
                            font-size:14px;
                            line-height:20px;
                            }
                            .con-html{
                            margin-top:6px;
                            margin-bottom:16px;
                            font-size:16px;
                            }
                            .bot{
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                            .time{
                                font-size:12px;
                                color:#6E6D7A;
                            }
                            .funs{
                                display: flex;
                                align-items: center;
                                a{
                                &:first-child{
                                    color:#BBBBBB;
                                    font-size:14px;
                                }
                                }
                                .cmt-zan{
                                color:#BBBBBB;
                                    font-size:12px;
                                    background:url('../assets/pro/dianzanicon.svg') no-repeat;
                                    margin-left:20px;
                                    padding-left:25px;
                                }
                            }
                            }
                        }
                    }
                }
            }
        }
    }
}

</style>